<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>三千💕如鱼</title>
  <link rel="shortcut icon" href="favicon.png">
  <link href="static/css/section1.css" rel="stylesheet">
  <link href="static/css/section2.css" rel="stylesheet">
  <link href="static/css/section3.css" rel="stylesheet">
  <link href="static/css/section4.css" rel="stylesheet">
  <link href="static/css/section5.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.min.css" rel="stylesheet">
</head>
<body>
  <audio loop="loop" autoplay="autoplay">
    <source src="music/告白气球.m4a" type="audio/mpeg" />
    Your browser does not support the audio element.
  </audio>
  <div id="fullPage">
    <div class="section">
      <div id="app">
        <div class="quotes verticalcenter">
          <p class="q1">2021年伊始，一个cool boy走进了你的世界</p>
          <p class="q2">从此，他希望出现在你的每年每天</p>
        </div>
        <div class="main-section">
          <div class="heart"></div>
          <div id="top">HAPPY</div>
          <div class="love">BIRTH</div>
          <div id="bottom">DAY</div>
        </div>
      </div>
    </div>
    <!-- <div class="section">
      <div id="content" class="content"></div>
    </div> -->
    <div class="section section4">
      <div class="paper">
        <div class="lines">
          <div class="text" spellcheck="false">
            你好哇，王儒俞： <br /><br />
            <span class='sentence sentence1'></span>
            <br />
            <span class='sentence sentence2'></span>
            <br />
            <span class='sentence sentence3'></span>
            <br />
            <span class='sentence sentence4'></span>
            <br />
            <span class='sentence sentence5'></span>
            <br />
            <span class='sentence sentence6'></span>
            <br />
            <span class='sentence sentence7'></span>
            <br />
            <span class='sentence sentence8'></span>
            <br />
            <span class='sentence sentence9'></span>
            <br />
            <span class='sentence sentence10'></span>
          </div>
        </div>
        <div class="holes hole-top"></div>
        <div class="holes hole-middle"></div>
        <div class="holes hole-bottom"></div>
      </div>
    </div>
    <div class="section section5">
      <div id="wrapper">
        <div id="candle-1" class="candle small">
          <div class="eye"></div>
          <div class="eye"></div>
          <div class="flame"></div>
        </div>
         <div class="flame-halo"></div>
        <div id="candle-2" class="candle">
          <div class="eye"></div>
          <div class="eye"></div>
          <div class="mouth"></div>
        </div>
      </div>
    </div>
  </div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.2/jquery.fullPage.min.js"></script>
  <script src='http://css-tricks.com/examples/BlurredText/js/jquery.lettering.js'></script>
  <script src="static/js/section2.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.4/typed.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      var t1 = new TimelineMax({
        repeat: -1
      });

      $('#fullPage').fullpage({
        afterLoad: function(link, index){
          switch (index){
              
            case 2:
              if(($(".sentence1").html() === '') || ($(".sentence10").html() !== '')) {
                
                $(".sentence").empty();
                $('.typed-cursor').remove();

                $(".sentence1").typed({
                  strings: ["首先希望29岁后的你一切顺利", "当然是在本人的陪伴下<(￣︶￣)>"],
                  typeSpeed: 300,
                  backSpeed: 100,
                  cursorChar: "♡",
                  loop: false,
                  callback: function() {
                    $(".sentence2").typed({
                      strings: ["你是个可爱的女孩子。是我很久都没有的，愿意敞开心扉去喜欢的那个人。"],
                      startDelay: 1000,
                      typeSpeed: 300,
                      backSpeed: 100,
                      cursorChar: "♡",
                      callback: function() {
                        $(".sentence3").typed({
                          strings: ["我现在就很高兴，因为你又好又喜欢我。(￣ˇ￣)"],
                          startDelay: 1000,
                          typeSpeed: 300,
                          backSpeed: 100,
                          cursorChar: "♡",
                          callback: function() {
                            $(".sentence4").typed({
                              strings: ["我是有点两重人格，冷静是表面上，嬉皮也是表面上的。"],
                              startDelay: 1000,
                              typeSpeed: 300,
                              backSpeed: 100,
                              cursorChar: "♡",
                              callback: function() {
                                $(".sentence5").typed({
                                  strings: [" 承认了这个非常不好意思。内里呢，很幼稚和傻气，甚至胆小。"],
                                  startDelay: 1000,
                                  typeSpeed: 300,
                                  backSpeed: 100,
                                  cursorChar: "♡",
                                  callback: function() {
                                    $(".sentence6").typed({
                                      strings: ["我有时很讨厌自己不温不凉的理智，也许只是害怕"],
                                      startDelay: 1000,
                                      typeSpeed: 300,
                                      backSpeed: 100,
                                      cursorChar: "♡",
                                      callback: function() {
                                        $(".sentence7").typed({
                                          strings: ["不过我只要你吻我一下就会变好呢！"],
                                          startDelay: 1000,
                                          typeSpeed: 300,
                                          backSpeed: 100,
                                          cursorChar: "♡",
                                          callback: function() {
                                            $(".sentence8").typed({
                                              strings: ["我希望我们好好的，互不猜忌，也互不称誉，安如平日"],
                                              startDelay: 1000,
                                              typeSpeed: 300,
                                              backSpeed: 100,
                                              cursorChar: "♡",
                                              callback: function() {
                                                $(".sentence9").typed({
                                                  strings: ["你和我说话像对自己说话一样，我和你说话也像对自己说话一样"],
                                                  startDelay: 1000,
                                                  typeSpeed: 300,
                                                  backSpeed: 100,
                                                  cursorChar: "♡",
                                                  callback: function() {
                                                    $(".sentence10").typed({
                                                      strings: ["我和你可以像两个小孩子，围着一个神秘的果酱罐，一点一点地尝它，看看未来的日子有多少甜"],
                                                      startDelay: 1000,
                                                      typeSpeed: 300,
                                                      backSpeed: 100,
                                                      cursorChar: "♡",
                                                    });
                                                  }
                                                });
                                              }
                                            });
                                          }
                                        });
                                      }
                                    });
                                  }
                                });
                              }
                            });
                          }
                        });
                      }
                    });
                  }
                });
              }
              
              break;

            case 3:

              c1 = $('#candle-1'),
              c2 = $('#candle-2'),
              f = c1.find('.flame'),
              m = c2.find('.mouth'),

              fTween = TweenMax.to(f, 0.3, {
                width: 27,
                backgroundColor: 'yellow',
                repeat: -1,
                yoyo: true
              });

              if((t1.progress() > 0) && (t1.progress() < 1))
              {
                t1.progress(0);
              }
              else
              {
                t1.add(
                  [
                    TweenMax.to(c2, 0.1, {
                      scale: 1.2,
                      transformOrigin: "center bottom"
                    }),
                    TweenMax.to(m, 0.7, {
                      scale: 5,
                      transformOrigin: "center center",
                      force3D: false
                    })
                  ]
                ).add(
                  [
                    TweenMax.to(c2, 0.7, {
                      scale: 1,
                      transformOrigin: "center bottom"
                    }),
                    TweenMax.to(m, 0.7, {
                      scale: 1.1,
                      transformOrigin: "center center",
                      force3D: false
                    })
                  ]
                ).to(m, 1, {
                  width: 100,
                  borderRadius: 0,
                  x: -300,
                  autoAlpha: 0
                }, 1.2)
                .to(c1, 0.3, {
                  x: -3,
                  repeat: 4,
                  yoyo: true
                }, 1.3)
                .to([f,'.flame-halo'], 0.1, {
                  autoAlpha: 0,
                  scale: 0.5
                }, 1.3)
                .add([
                  TweenMax.to(c1, 1, {
                    height: "-=20",
                    scaleX: 1.2,
                    backgroundColor: "#FFCCCC",
                    transformOrigin: "center center"
                  }),
                  TweenMax.to(c1.find('.eye'), 1, {
                    height: "-=5"
                  }),
                ])
                .to(c1, 0.2, {
                  x: "+=20",
                  repeat: 4,
                  yoyo: true
                }).add(
                  [
                    TweenMax.to(f, 0.2, {
                      autoAlpha: 1,
                      scale: 1.2
                    })

                  ]
                ).add(
                  [
                    TweenMax.to(c1, 0.5, {
                      height: "+=20",
                      scaleX: 1,
                      x: "-=20",
                    })

                  ]
                )
              }
              break;

            default:
              break;
          }
        },

        onLeave: function(link, index){
          switch (index){

            default:
              break;
          }
        }
      });

      $('.q1').delay(1000).fadeIn(300).delay(2000).fadeOut(300, function () {
        $('.q2').delay(1000).fadeIn(300 ).delay(2500).fadeOut(300, function () {
          $('.quotes').fadeOut(300);
          $('.main-section').delay(1000).fadeIn(300, function () {
            
          });
        });
      });
    });

    $('audio')[0].volume = 0.4;

    $("#top").lettering();
    $("#bottom").lettering();

  </script>
</body>
</html>
